<template>
    <div class="collect max-w">
        <div class="max-w header">【工资条】查看详情</div>
        <div class="max-w collect-chart card">
            <div class="collect-chart-title">人员查看情况</div>
            <v-chart autoresize :option="data.option" style="height: 240px"></v-chart>
            <el-button class="buttons-btn" type="primary" @click="confirm">发送提醒</el-button>
        </div>
        <div class="max-w collect-card card">
            <p class="collect-card-header">人员确定情况</p>
            <div class="collect-card-list">
                <ul class="list-title">
                    <li class="list-li">已确认</li>
                    <li class="list-li">未确认</li>
                    <li class="list-li">确认率</li>
                    <li class="list-li" style="color:#FE9571">已反馈</li>
                </ul>
                <ul class="list-number">
                    <li class="list-li">{{ data.listQty.confirmQty }}人</li>
                    <li class="list-li">{{ data.listQty.unconfirmQty }}人</li>
                    <li class="list-li">{{ data.feedbackRate + '%' }}</li>
                    <li class="list-li">{{ data.listQty.feedbackQty }}人</li>
                </ul>
            </div>
        </div>
        <div class="max-w collect-spec">
            <img class="spec-img" src="../../assets/info.png" />
            <p class="name">
                具体详情请前往工资条管理后台进行查看！
            </p>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { feedbackInfo,WeChatCall } from '@/api/salaryApi'
// import { ElMessage } from 'element-plus'

const data = reactive({
    option: {},
    listQty: {},
    feedbackRate: 0, //确定率
    lookRate: 0, //查看率
    haveSee: 0, // 已看
    didSee: 0 //未看
})

onMounted(() => {
    feedback()
})

const feedback = () => {
    feedbackInfo().then(res => {
        if (res) {
            data.listQty = res
            if (res.confirmQty == 0) {
                data.feedbackRate = 0
            } else {
                data.feedbackRate = ( Number(res.confirmQty)/(Number(res.sendQty))*100).toFixed(3)
            }
            data.haveSee = res.isreadQty
            data.didSee = Number(res.sendQty) - Number(res.isreadQty)
            data.lookRate = ((Number(res.isreadQty) / Number(res.sendQty))).toFixed(3)*100
            options()
        }
    })
}

// 发送提醒
const confirm = ()=>{
    WeChatCall().then(res=>{
        console.log(res) 
        alert('推送失败')
        if(res.statusCode==200){
            alert(res.message)
        }else{
            alert('推送失败')
        }
    })
}
// 饼图的数据渲染 
const options = () => {

    data.option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        title: [{
            text: '查看率',
            subtext: data.lookRate.toFixed(3) + '%',
            x: '50%',
            y: '38%',
            textStyle: {
                fontSize: 14,
                color: '#999'
            },
            subtextStyle: {
                fontSize: 28,
                color: '#333'
            },
            textAlign: 'center'
        }],
        series: [
            {
                name: '人员查看情况',
                type: 'pie',
                radius: ['50%', '70%'],
                color: ["#8085E9", "#EAE9E9", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#1890FF", "#ea7ccc"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    formatter: '{name|{b}}\n{time|{c}}',
                    minMargin: 15,
                    edgeDistance: 20,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 16,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: data.haveSee, name: '已看' },
                    { value: data.didSee, name: '未看' }
                ]
            }
        ]
    }
}


</script>

<style scoped lang="scss">
@import "index.scss";
</style>